<template>
	<a-col :span="3.5" v-if="props.toolConfig.agentStatus">
		<a-form-item label="坐席状态">
			<a-select
				v-model:value="agentCurrentStatus"
				:options="agentCurrentStatusOptions"
				placeholder="坐席状态"
				allow-clear
				style="width: 120px"
				@change="changeAgentStatus"
			></a-select>
		</a-form-item>
	</a-col>
	<a-col :span="3.5" v-if="props.toolConfig.callTimer">
		<a-form-item label="通话时长">
			<a-button>{{ callTimer }}</a-button>
		</a-form-item>
	</a-col>
	<a-col :span="8" v-if="props.toolConfig.callNumber">
		<a-form-item label="主叫号码">
			<a-select v-model:value="callNumber" @change="changeCallNumber">
				<a-select-option v-for="item in callerNumberList" :key="item.ZCallerName" :value="item.ZCaller"
				>{{ item.ZCallerName }}
				</a-select-option>
			</a-select>
		</a-form-item>
	</a-col>
	<a-col :span="3" v-if="props.toolConfig.callingPhone">
		<a-form-item>
			<a-input v-model:value="callingPhone"/>
		</a-form-item>
	</a-col>
	<a-col :span="1.5" v-if="props.toolConfig.singleCall">
		<a-button type="primary" :disabled="singleCallDisabled" @click="singleCall">拨打</a-button>
	</a-col>
	<a-col :span="1.5" v-if="props.toolConfig.answerCall">
		<a-button type="primary" @click="answerCall">接听</a-button>
	</a-col>
	<a-col :span="1.5" v-if="props.toolConfig.disconnectedCall">
		<a-button type="primary" @click="htWebCall.disconnectedCall()">挂断</a-button>
	</a-col>
	<a-col :span="1.5" v-if="props.toolConfig.keepCall">
		<a-button type="primary" @click="htWebCall.keepCall()">保持</a-button>
	</a-col>
	<a-col :span="1.5" v-if="props.toolConfig.muteCall">
		<a-button type="primary" @click="htWebCall.isMute.value ? htWebCall.reMuteCall() : htWebCall.muteCall()">
			{{ htWebCall.isMute.value ? '取消静音' : '静音' }}
		</a-button>
	</a-col>
	<a-col :span="1.5" v-if="props.toolConfig.consultCall">
		<a-button type="primary">磋商</a-button>
	</a-col>
	<a-col :span="1.5"
		   v-if="props.toolConfig.monitorCall && (hasPerm('branchManager') || hasPerm('itAdmin'))">
		<a-button type="primary" @click="monitorCall">
			监听
		</a-button>
	</a-col>
	<a-col :span="8" v-if="props.toolConfig.customerInfo">
		<a-form-item label="自定义展示信息：">{{ htWebCall.customerInfo }}</a-form-item>
	</a-col>
	<a-modal v-model:open="monitorCallModel" title="坐席监听/强拆" @ok="monitorCallModel = false" :footer="null">
		<a-form-item label="坐席工号">
			<a-input v-model:value="monitorCallAgent"/>
		</a-form-item>
		<a-space>
			<a-button type="primary" @click="htWebCall.monitorCall(monitorCallAgent)">监听电话</a-button>
			<a-button type="primary" @click="htWebCall.forcedCall(monitorCallAgent)">强制挂断</a-button>
		</a-space>
	</a-modal>
</template>
<script setup>
import tool from '@/utils/tool'
import htWebCall from '@/plugins/htWebCall'
import htApi from '@/api/tjzy/call/ht/htApi'
import {aesDecrypt} from '@/utils/aesEncryptUtil'
import callApi from "@/api/tjzy/call/callApi";

const emit = defineEmits({callEvent: Object})
const props = defineProps({
	toolConfig: {
		type: Object,
		default: () => ({
			agentStatus: true,
			callTimer: true,
			callingPhone: true,
			callNumber: true,
			filterKey: [],
			singleCall: true,
			answerCall: true,
			disconnectedCall: true,
			keepCall: true,
			muteCall: true,
			consultCall: true,
			monitorCall: true,
			customerInfo: true
		})
	}
})

const singleCallDisabled = ref(false)
const callingPhone = htWebCall.callingPhone
const callNumber = ref()
const agentCurrentStatusOptions = tool.dictList('AgentCurrentStatusHT')
const agentCurrentStatus = htWebCall.agentCurrentStatus
const currentSeconds = ref(0)
const callTimer = ref('00:00:00')
const callerNumberList = ref([])
const intervalId = ref(undefined)
const isCall = ref(false)
const monitorCallModel = ref(false)
const monitorCallAgent = ref();

const changeCallNumber = (val) => {
	callApi.setCallNumber(val)
}

/**
 * 开启计时器
 */
const startTimer = () => {
	if (intervalId.value !== undefined) {
		return
	}
	intervalId.value = setInterval(() => {
		currentSeconds.value += 1
		callTimer.value = formattedTime(currentSeconds.value)
	}, 1000)
}

/**
 * 重置计时器
 */
const resetTimer = () => {
	if (intervalId.value !== undefined) {
		clearInterval(intervalId.value)
		intervalId.value = undefined
	}
	currentSeconds.value = 0
	//callTimer.value = '00:00:00';
}

/**
 * 时间转换
 * @param seconds
 */
const formattedTime = (seconds) => {
	// 计算小时数
	const hours = Math.floor(seconds / 3600)
	// 计算剩余的分钟数（不包括小时转换的分钟）
	const minutes = Math.floor((seconds % 3600) / 60)
	// 计算剩余的秒数（不包括分钟和小时转换的秒）
	const secs = seconds % 60
	// 使用padStart方法确保小时、分钟和秒都是两位数
	return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
}
const singleCall = () => {
	singleCallDisabled.value = true
	const phoneNumber = /^\d{10,}$/.test(callingPhone.value) ? callingPhone.value : aesDecrypt(callingPhone.value);
	htWebCall.singlePointCall(phoneNumber, {caseId: tool.data.get('USER_INFO').tenantId})
	emit('callEvent', {callingPhone: phoneNumber})
}
const answerCall = () => {
	htWebCall.answerCall()
}
const changeAgentStatus = (val) => {
	htWebCall.changeAgentCurrentStatus(val);
}
const monitorCall = () => {
	monitorCallModel.value = true
}
watch(htWebCall.isCall, (newValue) => {
	if (!newValue) {
		resetTimer()
	}
})
watch(htWebCall.customerInfo, (newValue) => {
	console.log(newValue)
})
watch(singleCallDisabled, (newValue) => {
	if (newValue) {
		setTimeout(() => {
			singleCallDisabled.value = false
		}, 5000)
	}
})
onMounted(() => {
	setInterval(() => {
		if (isCall.value !== htWebCall.isCall.value) {
			isCall.value = htWebCall.isCall.value
			if (isCall.value) {
				startTimer()
			} else {
				resetTimer()
			}
		}
	}, 500)
	setTimeout(() => {
		callerNumberList.value =
			props.toolConfig.filterKey !== undefined && props.toolConfig.filterKey.length > 0
				? htWebCall.callerNumberList.value.filter((item) => {
					return props.toolConfig.filterKey.some((key) => item.ZCallerName.includes(key))
				})
				: [...htWebCall.callerNumberList.value]
		htApi.getCallNumber().then((res) => {
			callNumber.value = res
		})
	}, 2000)
})
</script>
